import dayjs from 'dayjs'
import classNames from 'classnames'
import { Card, Col, Divider, Row } from 'antd'

import { useBoundStore } from '../../store'
import { getWaybillStatusName } from '../../utils'
import styles from './styles.module.less'

function HeaderItem({ label, value }: { label: string; value?: React.ReactNode }) {
  return (
    <div className={styles.box_header_item}>
      <div className={styles.box_header_item_label}>{label}</div>
      <div className={styles.box_header_item_value}>{value ?? '-'}</div>
    </div>
  )
}

export const ScheduleInfo = () => {
  const detail = useBoundStore(state => state.detail)

  const timeInfoList = [
    {
      label: '下单时间',
      value: detail?.createAt ? dayjs(detail?.createAt).format($F_MD) : '-',
    },
    {
      label: '发货日期',
      value: detail?.shipmentDate ? dayjs(detail?.shipmentDate).format($F_MD) : '-',
    },
    {
      label: 'EDD',
      value: detail?.edd ? dayjs(detail?.edd).format($F_MD) : '-',
    },
    {
      label: '送达时段',
      value: detail?.deliveryTime ? dayjs(detail?.deliveryTime).format($F_MD) : '-',
    },
    {
      label: '签收日期',
      value: detail?.signingTime ? dayjs(detail?.signingTime).format($F_MD) : '-',
    },
  ]

  return (
    <Card>
      <div className={styles.box_progress}>
        {getWaybillStatusName.valueList.map((v, i) => (
          <div key={v}>
            <div
              className={classNames(
                styles.box_progress_item,
                v === detail?.waybillStatus ? styles.box_progress_processing : '',
                (detail?.waybillStatus ?? 0) > v ? styles.box_progress_processed : '',
              )}
            />
            <div
              className={classNames(
                styles.box_progress_content,
                v === detail?.waybillStatus
                  ? styles.box_progress_content_processing
                  : styles.box_progress_content_processed,
              )}
            >
              {getWaybillStatusName(v)}
              <p>
                {detail?.waybillStatusUpdateTime?.[v] ? dayjs(detail.waybillStatusUpdateTime[v]).format($F_MD) : ''}
              </p>
            </div>
          </div>
        ))}
      </div>
      <Divider />
      <div className={styles.box_time_info}>
        <Row wrap={false} gutter={[24, 0]} align="middle">
          {timeInfoList.map((v, i) => (
            <Col flex={`0 0 ${100 / timeInfoList.length}%`} key={v.label}>
              <HeaderItem key={v.label} label={v.label} value={v.value} />
            </Col>
          ))}
        </Row>
      </div>
    </Card>
  )
}
